<template>
  <a-drawer v-model:visible="visible" title="音乐人绑定详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
    <a-descriptions :column="2" size="large" class="general-description">
      <!--      <a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>-->
      <!--      <a-descriptions-item label="用户名称">{{ dataDetail?.userName }}</a-descriptions-item>-->

      <!--      <a-descriptions-item label="是否绑定">{{ dataDetail?.isBind }}</a-descriptions-item>-->
      <!--      <a-descriptions-item label="创建人">{{ dataDetail?.createUser }}</a-descriptions-item>-->
      <!--      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>-->
      <!--      <a-descriptions-item label="修改人">{{ dataDetail?.updateUser }}</a-descriptions-item>-->
      <a-descriptions-item label="审批人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
      <a-descriptions-item label="审批时间">{{ dataDetail?.updateTime }}</a-descriptions-item>

      <a-descriptions-item label="申请人">{{ dataDetail?.createUserString }}</a-descriptions-item>
      <a-descriptions-item label="艺人">{{ dataDetail?.artist }}</a-descriptions-item>
      <a-descriptions-item label="艺人主页" :span="2">
        <a-link v-if="dataDetail?.url " :href="dataDetail?.url" target="_blank" icon>
          {{ dataDetail.url }}
        </a-link>
        <a-tag v-else color="red">暂未录入艺人主页</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="备注" v-if="dataDetail?.notes ">
        {{ dataDetail?.notes }}
      </a-descriptions-item>
      <a-descriptions-item label="备注" v-else>
        <a-tag color="red">暂无备注</a-tag>
      </a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script setup lang="ts">
import {useWindowSize} from '@vueuse/core'
import {type MusicianBindDetailResp, getMusicianBind as getDetail} from '@/apis/musician/musicianBind'

const {width} = useWindowSize()

const dataId = ref('')
const dataDetail = ref<MusicianBindDetailResp>()
const visible = ref(false)

// 查询详情
const getDataDetail = async () => {
  const {data} = await getDetail(dataId.value)
  dataDetail.value = data
}

// 打开
const onOpen = async (id: string) => {
  dataId.value = id
  await getDataDetail()
  visible.value = true
}

defineExpose({onOpen})
</script>

<style scoped lang="scss"></style>
